<!--
 * @Author       : Hejh(3010733382@qq.com)
 * @Version      : V1.0
 * @Date         : 2024-03-14 14:02:29
 * @Description  : 用户设置-基础设置
-->
<template>
  <div class="flex items-center">
    <left-line class="w-0"></left-line>
    基础设置
  </div>
  <n-divider class="!my-2" />
  <n-form
    v-loading="loading"
    ref="formRef"
    :label-width="200"
    :label-placement="menuShow ? 'left' : 'top'"
    label-align="left"
    :model="settings"
    size="small"
    require-mark-placement="left"
  >
    <n-form-item label="显示隐藏文件：" path="showHideFile">
      <n-switch
        :value="settings.showHideFile === '1'"
        @update:value="
          (value: boolean) => handleChange('showHideFile', '' + +value)
        "
      />
      <div class="ml-[12px] text-gray-400 text-[12px]">
        隐藏文件:以.开头的文件,及系统后台设置的隐藏文件名; 开启后隐藏文件会显示;
      </div>
    </n-form-item>
    <n-form-item label="开启图片缩略图：" path="showPicThumbnail">
      <n-switch
        :value="settings.showPicThumbnail === '1'"
        @update:value="
          (value: boolean) => handleChange('showPicThumbnail', '' + +value)
        "
      />
      <div class="ml-[12px] text-gray-400 text-[12px]">
        开启后浏览器体验更佳
      </div>
    </n-form-item>
    <n-form-item label="同名文件处理方式：" path="repeatFile">
      <n-radio-group
        v-model:value="settings.repeatFile"
        name="radiogroup"
        @update:value="(value: string) => handleChange('repeatFile', value)"
      >
        <n-space>
          <n-radio value="0"> 跳过 </n-radio>
          <n-radio value="1"> 覆盖</n-radio>
          <n-radio value="2"> 重命名(创建副本) </n-radio>
        </n-space>
      </n-radio-group>
    </n-form-item>

    <MyTransition>
      <div v-if="settings.repeatFile === '2'">
        <n-form-item label="文件重命名格式：" path="renameFormat">
          <n-radio-group
            v-model:value="settings.renameFormat"
            name="radiogroup2"
            @update:value="
              (value: string) => handleChange('renameFormat', value)
            "
          >
            <n-space>
              <n-radio value="0"> 时间戳 </n-radio>
              <n-radio value="1"> 自增序号</n-radio>
            </n-space>
          </n-radio-group>
        </n-form-item>
      </div>
    </MyTransition>

    <!-- <n-form-item label="主题样式：" path="theme">
      <n-radio-group
        :value="settings.theme"
        name="radiobuttongroup1"
        @update:value="(value: string) => handleChange('theme', value)"
      >
        <n-radio-button value="light"> 浅色 </n-radio-button>
        <n-radio-button value="dark">暗色</n-radio-button>
        <n-radio-button value="system">跟随系统</n-radio-button>
      </n-radio-group>
    </n-form-item> -->
  </n-form>
  <!-- <ace-edit></ace-edit> -->
</template>

<script setup lang="ts">
import { useMessage } from 'naive-ui'
import { getUserOptions, setUserOption } from '@/api/user'
import { userMenuShow } from '@/hooks/useMenuShow'
import { load } from '@/utils/loading'
const { menuShow } = userMenuShow()
const settings = reactive({
  showHideFile: '1',
  showPicThumbnail: '1',
  repeatFile: '1',
  theme: 'dark',
  renameFormat: '1'
})

const loading = ref(false)
const message = useMessage()

const loadUserOptions = () => {
  loading.value = true
  getUserOptions()
    .then((res) => {
      const {
        showHideFile,
        showPicThumbnail,
        repeatFile,
        theme,
        renameFormat
      } = res.data
      settings.showHideFile = showHideFile || '0'
      settings.showPicThumbnail = showPicThumbnail || '0'
      settings.repeatFile = repeatFile || '2'
      settings.theme = theme || 'light'
      settings.renameFormat = renameFormat || '1'
    })
    .catch(console.error)
    .finally(() => {
      loading.value = false
    })
}

onMounted(() => {
  loadUserOptions()
})

const handleChange = (key: string, value: string) => {
  // 发起请求进行配置的修改
  load.show()
  setUserOption({
    key,
    value
  })
    .then(() => {
      message.success('更新配置成功')
      loadUserOptions()
    })
    .catch(console.error)
    .finally(() => {
      load.hide()
    })
}
</script>

<style scoped lang="scss"></style>
